<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }
  </style>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>

    <!-- Vue3响应式原理 -->
    <!-- <script type="module">
      import {effect} from "./utils/effect.js"
      import {reactive} from "./utils/reactive.js"
      

      const user = reactive({
        name: "小满",
        age: 18,
        student: {
          name: "LiLei"
        }
      })

      effect(() => {
        document.querySelector("#app").innerText = `${user.name} - ${user.age} - ${user.student.name}`
      })

      setTimeout(() => {
        user.name = "大满xxx"
        setTimeout(() => {
          user.age = 25
          setTimeout(() => {
            user.student.name = "Lin"
          }, 1000)
        }, 1000)
      }, 2000)
    </script> -->
  </body>
</html>
